

<template>
  <div>
    <!-- <Button type="primary" @click="modal1 = true">Display dialog box</Button> -->
    <Modal
      v-model="mode"
      width="50%"
      title="角色编辑"
      @change="testChange"
      @on-cancel="cancel"
    >
      <Row>
        <Form
          ref="UserData"
          :model="UserData"
          :rules="ruleInUser"
          :label-width="100"
        >
          <div style="width: 100%; height: auto; margin: 0 auto">
            <!-- <i-col span="24">
                       <FormItem label="用户编号：" prop="Id">
                          <Input v-model="UserData.Id" class="orders_disabled" placeholder="请输入用户编号" disabled />
                       </FormItem>
                     </i-col> -->
            <Row>
              <i-col span="12">
                <FormItem label="角色名称" prop="Wx">
                  <label slot="label">角色名称：</label>
                  <Input v-model="UserData.Wx" placeholder="角色名称" />
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="角色描述" prop="UserName">
                  <Input v-model="UserData.UserName" placeholder="角色描述" />
                </FormItem>
              </i-col>
            </Row>

            <i-col span="12">
              <FormItem label="备注：" prop="Remark">
                <label slot="label">备&nbsp;&nbsp;&nbsp;&nbsp;注：</label>
                <Input
                  v-model="UserData.Remark"
                  style="width: 350px"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请说明备注事项..."
                />
              </FormItem>
            </i-col>

            <i-col span="24">
              <FormItem>
                <Button
                  type="primary"
                  :loading="loading"
                  @click="handleSubmit('UserData')"
                  >提交</Button
                >
                <Button
                  @click="handleReset('formValidate')"
                  style="margin-left: 8px"
                  >重置</Button
                >
              </FormItem>
            </i-col>
          </div>
        </Form>
      </Row>

      <div slot="footer">
        <!-- <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button> -->
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getCompanyList,
  getDeptList,
  updateUserData,
  getUserlist,
  getVehlist,
  subOrderData,
} from "@/api/data";
import { formatDate } from "../../components/date.js";
export default {
  name: "UserEdit",
  data() {
    return {
      loading: false,
      mode: this.edit,

      //表单验证规则
      ruleInUser: {},

      listdata: [],
    };
  },
  props: {
    edit: {
      type: Boolean,
      required: true,
    },
    UserData: {
      type: Object,
      required: true,
    },
  },
  methods: {
    testChange(val) {
      this.$emit("testChange", val);
    },
    cancel() {
      this.loading = false;
      let data = {
        mode: false,
      };
      this.$emit("cancelCallBack", data);
    },
    //提交编辑后的userInfo
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        console.log("提交验证：", valid);
        if (valid) {
          this.loading = true;
          this.submit();
        } else {
          this.$Message.error("请填写相关信息!");
        }
      });
    },
    submit() {
      const data = {
        Id: this.UserData.Id,
        UserName: this.UserData.UserName,
        Password: "123456",
        RealName: this.UserData.RealName,
        Sex: this.UserData.Sex,
        Age: this.UserData.Age,
        Wx: this.UserData.Wx,
        Qq: this.UserData.Qq,
        Email: this.UserData.Email,
        Company: this.UserData.Company,
        Dept: this.UserData.Dept,
      };
      updateUserData(data)
        .then((res) => {
          if (res == "OK") {
            this.$Message.success("提交成功");
            this.loading = false;
            let data = {
              mode: false,
            };
            this.$emit("success", data);
          } else if (response.data.flag == 0) {
            this.$Message.success("提交失败");
          } else if (response.data.flag == 2) {
            this.$Message.success("状态过期");
          }
        })
        .catch((error) => {
          this.$Message.error("请核对之后重新提交1");
          this.loading = false;
        });
    },
  },
  mounted() {
    const cmpdata = {
      fields: "Id,CompanyName",
      offset: "0",
      limit: "-1",
    };
    const dptdata = {
      fields: "Id,DeptName",
      offset: "0",
      limit: "-1",
    };
    //获得包含公司Id和companyname字段的全部列表
    getCompanyList(cmpdata).then((res) => {
      this.CompanyList = res.List;
    });
    //获得包含公司Id和companyname字段的全部列表
    getDeptList(dptdata).then((res) => {
      this.DeptList = res.List;
    });
  },
  watch: {
    edit(val) {
      this.mode = val;
    },
  },
};
</script>
<style>
.dept .ivu-select-placeholder {
  color: #515a6e !important;
}
</style>